<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>添加App</title>
<style type="text/css">
#app1{
	margin-left:20px;
	margin-top:0px;
	}
#app2{
	margin-left:20px;
	margin-top:0px;
	display:none
	}
#app3{
	margin-left:20px;
	margin-top:0px;
	display:none
	}

#app3 .lift{
	width:20%;
	height:100%;
	text-align:center;
	border-right:#F00 solid thin;
	float:left}
	
	#app3 .lift a{
		padding: 2px 4px 3px 4px;
		display:block
		}
        #app3 .lift a:hover
		{background-color:#F00;
		color:#FFF;
		font-weight:bold}
		
#app3 .right{
	float:left; 
	width:40%;
	height:100%;
	 
	}

.r1{
	width:100%;
	height:100%;
}
 
 .r2{
	
	display:none;
	
	}
.r3{
	width:100%;
	height:100%;
	display:none}
.r4{
	width:100%;
	height:100%;
	display:none}
.r5{
	width:100%;
	height:100%;
	display:none}
		
#app4{
	margin-left:20px;
	margin-top:0px;
	display:none
	}
</style>

<style>
.upload_preview{border-top:1px solid #bbb; border-bottom:1px solid #bbb; background-color:#fff; overflow:hidden; _zoom:1;}
.upload_append_list{height:150px; padding:0 1em; float:left; position:relative;}
.upload_loading{height:250px; background:url(http://www.zhangxinxu.com/study/image/loading.gif) no-repeat center;}
.upload_delete{margin-left:2em;}
.upload_delete_hotel{margin-left:2em;}
</style>

</head>

<script src="<%=request.getContextPath() %>/js/jquery-1.8.2.js"></script>
<script src="<%=request.getContextPath() %>/js/ajaxupload.js"></script>
<script src="<%=request.getContextPath() %>/js/zxxFile.js"></script>
<script src="<%=request.getContextPath() %>/js/zxxFile_hotel.js"></script>

 
<body>

<div id="app1">
添加客户信息;<br>

<br>
客户名称:<input type="text" name="mname" id="mname" /><span>选择客户</span><br>
客户id:<input type="text" name="mid" id="mid"/><br>
酒店id:酒店<input type="text" id="hotelId" /><br>
<input id="next1" type="button" value="下一步》">
 
</div>

<div id="app2">
<p>设置App信息</p>
 
app名称:<input type="text" name="title" id="title"/><br>

是否公开:<input name="state" type="radio" value="1" />是
		<input name="state" type="radio" value="0" />否<br>
app主题:<input name="skin" type="radio" value="1" />武藤蓝
		<input name="skin" type="radio" value="0" />高端黑
        <input name="skin" type="radio" value="1" />脑残粉
		<input name="skin" type="radio" value="0" />古德白<br>
        <input type="button" id="pre1" value="《返回" />
        <input type="button" id="next2"value="下一步》"/>
 
</div>

<div id="app3">

<div class="lift">
 <p> <a id="1">婚礼主题</a></p>
   <p><a id="2">婚纱照</a></p>
  <p> <a id="3">婚礼视频</a></p>
  <p> <a id="4">喜帖</a></p>
  <p> <a id="5">婚礼现场</a></p>
</div>

<div class="right">
 
    <div id="r1" class="r1">
    	婚礼主题:<input type="text" id="info" /><br>
   		新娘信息:<input type="text" id="binfo" /><br>
   		新郎信息:<input type="text" id="bginfo" /><br>
   		结婚日期:<input type="text" id="wdate" />
   		
    </div>
    
    <div id="r2" class="r2">
    		<form id="uploadForm" action="WedImgUpload" method="post"  enctype="multipart/form-data">
    			 <input id="fileImage" type="file" size="30" name="fileselect[]" multiple="multiple"  />
    			 <button type="button" id="fileSubmit" class="upload_submit">确认上传图片</button>
    				 <div id="preview" class="upload_preview"></div>
    				 <div id="uploadInf" class="upload_inf"></div>
    		</form>
    </div> 
    
     <div id="r3" class="r3">
    婚礼视频:<input type="button" id="video" value="选择视频" />
   <input type="button" id="smallImg" value="选择该视频图片" />
 <input type="button" id="videoOK" value="上传" /><br>
     <div id="videoView">
      
    </div>
    </div> 
     <div id="r4" class="r4">
      喜帖:邀请文字<input type="text" id="i_info" name="i_info" /><br>
		  喜帖样式:
        <input name="i_style" type="radio" value="1" />样式一 
		<input name="i_style" type="radio" value="2" />样式二
        <input name="i_style" type="radio" value="3" />样式三
		<input name="i_style" type="radio" value="4" />样式四<br>

      </div>
      
      
      <div id="r5" class="r5">
     婚礼现场:
		   上传照片:<form id="uploadForm_hotel" action="hotelImageUpload" method="post"  enctype="multipart/form-data">
    			 <input id="fileImage_hotel" type="file" size="30" name="fileselect_hotel[]" multiple="multiple"  />
    			 <button type="button" id="fileSubmit_hotel" class="upload_submit">确认上传图片</button>
    				 <div id="preview_hotel" class="upload_preview">qeqweqweqweqweq</div>
    				 <div id="uploadInf_hotel" class="upload_inf"></div>
    		</form>
      </div>
     
 
 
</div>
 
 <br><br> <br><br> <br><br> <br><br> <br><br> <br><br>
 <input type="button" id="pre2" value="《返回" />
 <input type="button" id="next3" value="下一步》" />
</div>

<div id="app4">
<button>发送二维码</button>
<button>继续创建</button>

</div>

</body>

<script>
var videoFile=$("#video");
var SmallImgFile=$("#smallImg");
//视频上传
var v_file=new AjaxUpload(videoFile,
		 {
    action:'WedVideoUpload',
    type:'post',
    autoSubmit:false,
    name:'file',
    onChange:function(file, ext)
    {   
    videoFile.val("文件已选中...");
    SmallImgFile.val("请选择一张图片!");
     },
    onSubmit:function(file, ext)
       {
    	/* if (!(ext && /^(avi|AVI|3GP|RMVB|FLV)$/.test(ext))) {  
            alert("您上传的图片格式不对，请重新选择！");  
            return false;  
        }  */
        
    	videoFile.val('上传中...');
    	 
    	
       },
       onComplete: function (file,response)
        {
    	   var date=$(response).text();
    	    
    	   //视频上传异常
    	   if(date=='error')
    		   {
    		   		alert("网络 异常!");
    		   		videoFile.val('重新上传..');
    		   		SmallImgFile.val("重新选择图片");
    		   }
    	   else
    		   VideoImg.submit();
	     }
   
 }
 );
//缩略图
var VideoImg=new AjaxUpload(SmallImgFile,
		 {
    action:'WedVideoImgUpload',
    type:'post',
    autoSubmit:false,
    name:'file',
    onChange:function(file, ext)
    {  
    	SmallImgFile.val("图片已选中...");
     },
    onSubmit:function(file, ext)
       {
    	if (!(ext && /^(jpg|JPG|png|PNG|gif|GIF)$/.test(ext))) {  
            alert("您上传的图片格式不对，请重新选择！");  
            return false;  
        }
    	
    	SmallImgFile.val('图片上传中...');
       //  this.disable();
       },
    onComplete: function (file,response)
    {
    	 SmallImgFile.val('上传成功');
    	 videoFile.val('再上传视频');
    	// alert($(response).text());
    	 var date=$(response).text();
    	 
    	 date=JSON.parse(date);
    	//date=evel(date)
    	//alert(date);
    	 
    	if(date.url=="error")
    		{
    		videoFile.val('重新上传..');
    		SmallImgFile.val('图片上传失败!');
    		}
    	
    	else
    		{
    		 
    		var $img=$("<img src='"+date.url+"' width='101' height='101' />"+
			    	'<span id='+date.id+'>删除</span>');
    	$("#videoView").append($img);
    	addEvt();
    		}
	     }
 }
 );

$("#videoOK").click(function()
		{
		v_file.submit();
	   
		});
		
		function addEvt()
		{
			$("span").click(function()
					{
						var span=$(this);
						var img=$(this).prev();
						var id=span.attr("id");
						$.ajax({
							url:'DelVideo',
							type:'POST',
							dataType:'JSON',
							data:{'videoId':id},
							success:function(date)
							{
								span.fadeOut("fast");
								img.fadeOut("fast");
							}
							
						});
					});
			
		}
</script>
 
 
<script>
 

$(function()
{
	 
	
	$("a").click(function()
	{
		 var id=$(this).attr("id");
		 var t="r"+id;
		 $("div [id^='r'][id!='"+t+"']").hide();
	     $("#r"+id).fadeIn();
	});
	
	$("#next1").click(function()
	{
		var clientId=$("#mid").val();
		var hotelId=$('#hotelId').val();
		 
		 $.ajax
		({	
			type:'GET',
			url:'AppAddFirst',
			data:'clientId='+clientId+'&hotelId='+hotelId,
			success:function(date){
				 
				$("#app1").hide();
				$("#app2").fadeIn();	
			}
		}); 
		 
		
			
			
			 
	});
	
	
	$("#next2").click(function()
	{	 
		 title=$("#title").val();
		 state=$("input[name='state']:checked").val();
		 skin=$("input[name='skin']:checked").val();
		 $.ajax
			({	
				type:'POST',
				url:'AppAddSecond',
				dataType:'JSON',
				data:{'title':title,'state':state,'skin':skin},
				success:function(date){
					 
					$("#app1").hide();
				 	$("#app2").hide();
					$("#app3").fadeIn();	
				}
			});
			
		 	
	});
	
	$("#next3").click(function()
	{
		 
		var binfo=$("#binfo").val();
		var bginfo=$("#bginfo").val();
		var wdate=$("#wdate").val();
		//请帖样式
		var  i_style=$("input[name='i_style']:checked").val();
		var  info=$("#info").val();
		 var i_info=$("#i_info").val();
		 
		 //酒店id
		 var hotelId=$("#hotelId").val();
			$.ajax
			({	
				type:'POST',
				url:'AppAddThraid',
				dataType:'JSON',
				data:{'binfo':binfo,'bginfo':bginfo,'wdate':wdate,'i_style':i_style,
					'info':info,'i_info':i_info,'hotelId':hotelId},
				contentType: "application/x-www-form-urlencoded; charset=utf-8",
				success:function(data)
				{
				 	$("#app1").hide();
					$("#app2").hide();
					$("#app3").hide();
					$("#app4").fadeIn();
				}
				
			});
			
	  	 
	});
	
	$("#pre1").click(function()
	{
		$("#app2").hide();
		$("#app1").fadeIn();
		
	});
	
	$("#pre2").click(function()
	{
		$("#app1").hide();
		$("#app3").hide();
		$("#app2").fadeIn();
	});
})
</script>

 <script>
//婚纱照上传
var params = {
	fileInput: $("#fileImage").get(0),
 	upButton: $("#fileSubmit").get(0),
    url: $("#uploadForm").attr("action"),
   filter: function(files) {
		var arrFiles = [];
		for (var i = 0, file; file = files[i]; i++) {
			if (file.type.indexOf("image") == 0 || (!file.type && /\.(?:jpg|png|gif)$/.test(file.name) /* for IE10 */)) {
				if (file.size >= 102400) {
					alert('您这张"'+ file.name +'"图片大小过大，应小于100k');	
				} else {
					arrFiles.push(file);	
				}			
			} else {
				alert('文件"' + file.name + '"不是图片。');	
			}
		}
		return arrFiles;
	},
	onSelect: function(files) {
	   var html = '', i = 0;
		$("#preview").html('<div"></div>');
		var funAppendImage = function() {
			file = files[i];
			if (file) {
				var reader = new FileReader()
				reader.onload = function(e) {
					html = html + '<div id="uploadList_'+ i +'" class="upload_append_list"><strong>' + file.name + '</strong>'+ 
						'<a href="javascript:" class="upload_delete" title="删除" data-index="'+ i +'">删除</a><br />' +
						'<img id="uploadImage_' + i + '" src="' + e.target.result + '"  width="101" height="101" />'+ 
						'' +
					'</div>';
					
					i++;
					funAppendImage();
				}
				reader.readAsDataURL(file);
			} else {
				$("#preview").html(html);
				if (html) {
					//删除方法
					$(".upload_delete").click(function() {
						ZXXFILE.funDeleteFile(files[parseInt($(this).attr("data-index"))]);
						return false;	
					});
					//提交按钮显示
					$("#fileSubmit").show();	
				} else {
					//提交按钮隐藏
					$("#fileSubmit").hide();	
				}
			}
		};
		funAppendImage();		
	},
	onDelete: function(file) {
		$("#uploadList_" + file.index).fadeOut();
	},
	onProgress: function(file, loaded, total) {
		var eleProgress = $("#uploadProgress_" + file.index), percent = (loaded / total * 100).toFixed(2) + '%';
		eleProgress.show().html(percent);
	},
	onSuccess: function(file, response) {
		$("#uploadInf").append("<p>上传成功,您可以继续上传</p>");
	},
	onFailure: function(file) {
		$("#uploadInf").append("<p>图片" + file.name + "上传失败！</p>");	
		$("#uploadImage_" + file.index).css("opacity", 0.2);
	},
	onComplete: function() {
		//提交按钮隐藏
		$("#fileSubmit").hide();
		//file控件value置空
		$("#fileImage").val("");
		$("#uploadInf").append("<p>当前图片全部上传完毕，可继续添加上传。</p>");
	}
};
ZXXFILE = $.extend(ZXXFILE, params);
ZXXFILE.init();
</script> 


<script>
//酒店图片上传
var params_hotel = {
	fileInput: $("#fileImage_hotel").get(0),
	upButton: $("#fileSubmit_hotel").get(0),
    url: $("#uploadForm_hotel").attr("action"),
   filter: function(files) {
	   var arrFiles = [];
		for (var i = 0, file; file = files[i]; i++) {
			if (file.type.indexOf("image") == 0 || (!file.type && /\.(?:jpg|png|gif)$/.test(file.name) /* for IE10 */)) {
				if (file.size >= 102400) {
					alert('您这张"'+ file.name +'"图片大小过大，应小于100k');	
				} else {
					arrFiles.push(file);	
				}			
			} else {
				alert('文件"' + file.name + '"不是图片。');	
			}
		}
		return arrFiles;
		return arrFiles;
	},
	onSelect: function(files) {

		var html = '', i = 0;
					$("#preview_hotel").html('<div"></div>');
					var funAppendImage_hotel= function() {
						file = files[i];
						if (file) {
							var reader = new FileReader()
							reader.onload = function(e) {
								html = html + '<div id="uploadList_hotel_'+ i +'" class="upload_append_list"><strong>' +file.name +
								'</strong>'+'<a href="javascript:" class="upload_delete_hotel" title="删除" data-index="'+ i +'">删除</a><br />' +
									'<img id="uploadImage_hotel_' + i + '" src="' + e.target.result + '"  width="101" height="101" />'+ '' +'</div>';
								
								i++;	
								funAppendImage_hotel();
							}
							reader.readAsDataURL(file);
						} else {
							$("#preview_hotel").html(html);
							if (html) {
								//删除方法
								$(".upload_delete_hotel").click(function() {
									ZXXFILE_hotel.funDeleteFile(files[parseInt($(this).attr("data-index"))]);
									return false;	
								});
								//提交按钮显示
								$("#fileSubmit_hotel").show();	
							} else {
								//提交按钮隐藏
								$("#fileSubmit_hotel").hide();	
							}
						}
					};
					funAppendImage_hotel();
},
onDelete: function(file) {
	$("#uploadList_hotel_" + file.index).fadeOut();
},
onProgress: function(file, loaded, total) {
	var eleProgress = $("#uploadProgress_" + file.index), percent = (loaded / total * 100).toFixed(2) + '%';
	eleProgress.show().html(percent);
},
onSuccess: function(file, response) {
	$("#uploadInf_hotel").append("<p>上传成功,您可以继续上传</p>");
},
onFailure: function(file) {
	$("#uploadInf_hotel").append("<p>图片" + file.name + "上传失败！</p>");	
	$("#uploadImage_hotel_" + file.index).css("opacity", 0.2);
},
onComplete: function() {
	//提交按钮隐藏
	$("#fileSubmit_hotel").hide();
	//file控件value置空
	$("#fileImage_hotel").val("");
	$("#uploadInf_hotel").append("<p>当前图片全部上传完毕，可继续添加上传。</p>");
}
};
ZXXFILE_hotel = $.extend(ZXXFILE_hotel, params_hotel);
ZXXFILE_hotel.hotel_init();
</script>  
</html>
